<template>
  <div id="echarts-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <bar-chart :chartData="barChartData" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <rose-chart />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- <gauge-chart :chartData="SimpleGaugeData" /> -->
          <SimpleGaugeChart :chartData="SimpleGaugeData"></SimpleGaugeChart>
        </div>
      </el-col>
    </el-row>
    <el-row style="background-color:#fff">
      <line-chart
        :chartData="lineChartData"
        ref="netWorkRef"
      />
      <!-- <div>
        <box options>
          <button-slot></button-slot>
          <log :chartData="lineChartData" />
        </box>
        <box options>
          <line-chart :chartData="lineChartData" />
        </box>
      </div> -->
    </el-row>
  </div>
</template>
<script>
// 引入组件
import BarChart from "./components/BarChart";
import LineChart from "./components/LineChart";
import RoseChart from "./components/RoseChart";
import SimpleGaugeChart from "./components/SimpleGaugeChart.vue";
// import Electrocardiogram from "./components/Electrocardiogram.vue"
import {
  getAllHsot,
  getHostCpu,
  getHostMemory,
  getHostDisk,
  getHostSpeed,
  getHostPayLoad,
  getHostTop,
} from "../../api/host.js";
export default {
  // 注册局部组件
  components: {
    BarChart,
    LineChart,
    RoseChart,
    SimpleGaugeChart,
    // Electrocardiogram,
  },
  data() {
    return {
      // 柱状图数据
      barChartData: {
        days: ["11.21", "11.22", "11.23", "11.24", "11.25", "11.26", "11.27"],
        data1: [100, 120, 161, 134, 105, 160, 165],
        data2: [120, 82, 91, 154, 162, 140, 145],
      },
      // 折线图数据
      lineChartData: {
        // expectedData: [4, 9, 12, 11, 5, 2, 9],
        actualData: [10, 4, 3, 11, 13, 10, 7],
      },
      // 仪表盘数据
      SimpleGaugeData: {
        data1: [10, 20, 30],
      },
    };
  },
  methods: {
    getAllHsot() {
      getAllHsot().then((res) => {
        console.log(res.data[0]);
        this.list = res.data;
        this.checkDefault = [this.list[0].ip];
      });
    },
    getHostCpu(ip) {
      getHostCpu(ip).then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {
    this.getAllHsot();
    this.getHostCpu();
  },
};
</script>
<style lang="less" scoped>
#echarts-container {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>